<template>
</template>
<script lang="ts">
import * as THREE from 'three'
import { EffectComposer, OrbitControls, RenderPass, UnrealBloomPass } from 'three/examples/jsm/Addons.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { GLTFLoader } from 'three/examples/jsm/Addons.js';

const scene = new THREE.Scene();


const width = 800;
const height = 800;
const camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
camera.position.set(0, 0, 200);
camera.lookAt(0, 0, 0);

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);


const renderer = new THREE.WebGLRenderer({
    antialias: true,  // 开启抗锯齿
    powerPreference: "high-performance" // 可选：提升性能
});
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);



const stats = new Stats;
stats.showPanel(0);
document.body.appendChild(stats.dom);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
    stats.update();
    renderer.render(scene, camera);
})



const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(100, 0);
shape.lineTo(100, 100);
shape.lineTo(0, 100);
shape.closePath();

// Shape内孔轮廓
const path1 = new THREE.Path();// 圆孔1
path1.absarc(20, 20, 10, 0, 2 * Math.PI);
const path2 = new THREE.Path();// 圆孔2
path2.absarc(80, 20, 10, 0, 2 * Math.PI);
const path3 = new THREE.Path();// 方形孔
path3.moveTo(50, 50);
path3.lineTo(80, 50);
path3.lineTo(80, 80);
path3.lineTo(50, 80);

shape.holes.push(path1, path2, path3);

const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide, // 双面渲染（镂空部分可见）
    wireframe: true       // 是否显示线框
});
const snapeGeometry = new THREE.ExtrudeGeometry(shape, {
    depth: 20, //拉伸长度
    bevelEnabled: true, //禁止倒角,默认true
});

const mesh = new THREE.Mesh(snapeGeometry, material);

scene.add(mesh);

const boxGeometry = new THREE.BoxGeometry(50, 50, 50);
const material1 = new THREE.MeshLambertMaterial({
    color: 0x004444,
    transparent:true,
    opacity:0.5,
});
const bosMesh = new THREE.Mesh(boxGeometry, material1);

// 长方体作为EdgesGeometry参数创建一个新的几何体
const edges = new THREE.EdgesGeometry(boxGeometry);
const edgesMaterial = new THREE.LineBasicMaterial({
  color: 0x00ffff,
})
const line = new THREE.LineSegments(edges, edgesMaterial);
mesh.add(line);


// // 创建一个 Shape
// const shape = new THREE.Shape();
// shape.moveTo(0, 1);
// shape.lineTo(0.2, 0.2);
// shape.lineTo(1, 0.2);
// shape.lineTo(0.3, -0.1);
// shape.lineTo(0.5, -1);
// shape.lineTo(0, -0.4);
// shape.lineTo(-0.5, -1);
// shape.lineTo(-0.3, -0.1);
// shape.lineTo(-1, 0.2);
// shape.lineTo(-0.2, 0.2);
// shape.lineTo(0, 1); // 回到起点

// // 用 ShapeGeometry 创建几何体
// const geometry = new THREE.ShapeGeometry(shape);

// // 用填色材质
// const material = new THREE.MeshBasicMaterial({
//   color: 0xff6600,
//   side: THREE.DoubleSide,  // 双面可见
// });

// // 创建 Mesh
// const mesh = new THREE.Mesh(geometry, material);
// mesh.position.set(10,10,10);

// scene.add(mesh);



renderer.render(scene, camera);

</script>